/**
Babel 是一个广泛使用的 JavaScript 编译工具，主要用于将现代 JavaScript 代码（ES6+）转换为向后兼容的版本，以便在旧版浏览器或环境中运行。
  1. 什么是 Babel？
  Babel 是一个 JavaScript 编译器，能够将使用最新 JavaScript 特性编写的代码转换为浏览器可以理解的旧版本 JavaScript。它支持多种插件和预设，使得开发者可以灵活地选择需要的功能。

  2. Babel 的核心功能
  - 语法转换: 将现代 JavaScript 语法转换为旧版 JavaScript 语法。
  - Polyfill: 提供对新特性的支持，例如 Promise、Array.from 等。
  - 源代码转译: 将 JSX（React 语法）等其他语言转译为 JavaScript。

  3. 在 Webpack 中使用 Babel 的步骤

   1. 安装 Babel 相关依赖
  首先，需要安装 Babel 和相关的 Webpack 加载器。可以使用以下命令安装：
  npm install --save-dev babel-loader @babel/core @babel/preset-env
  -  babel-loader  是 Webpack 的加载器，用于处理 JavaScript 文件。
  -  @babel/core  是 Babel 的核心库。
  -  @babel/preset-env  是一个预设，允许你使用最新的 JavaScript 特性。

   2. 创建 Babel 配置文件
  在项目根目录下创建一个名为  .babelrc  的文件，配置 Babel 的预设和插件。例如：
  {
    "presets": [
      "@babel/preset-env"
    ]
  }
  这个配置告诉 Babel 使用  @babel/preset-env  进行转换。

   3. 在 Webpack 配置中添加 Babel 加载器
  在  webpack.config.js  中配置 Babel 加载器，以便 Webpack 在构建时处理 JavaScript 文件。例如：
  const path = require('path');

  module.exports = {
    entry: './src/index.js', // 入口文件
    output: {
      filename: 'bundle.js', // 输出文件
      path: path.resolve(__dirname, 'dist'),
    },
    module: {
      rules: [
        {
          test: /\.js$/, // 匹配所有 .js 文件
          exclude: /node_modules/, // 排除 node_modules 文件夹
          use: {
            loader: 'babel-loader', // 使用 babel-loader 处理文件
          },
        },
      ],
    },
    mode: 'development', // 或 'production'
  };
  4. Babel 的预设和插件
  - 预设: Babel 预设是一组插件的集合。例如， @babel/preset-env  可以根据目标环境自动选择需要的插件。
  - 插件: Babel 插件可以单独使用，提供特定的功能。例如， @babel/plugin-transform-arrow-functions  将箭头函数转换为普通函数。

  5. 使用 Polyfill
  如果需要使用新特性（如 Promise），可以安装  core-js  和  regenerator-runtime ：
  npm install --save core-js regenerator-runtime
  然后在入口文件中引入：
  import 'core-js/stable';
  import 'regenerator-runtime/runtime';

  6. 注意事项
  - 性能: 使用 Babel 可能会增加构建时间，尤其是在大型项目中。
  - 配置: 根据项目需求选择合适的预设和插件，以优化构建过程。
  - 兼容性: 确保 Babel 的配置与目标浏览器兼容，以避免运行时错误。

  总结
  Babel 是一个强大的工具，可以帮助开发者使用最新的 JavaScript 特性，同时确保代码在各种环境中的兼容性。在 Webpack 中配置 Babel 是一个相对简单的过程，只需安装相关依赖、创建配置文件并在 Webpack 配置中添加加载器即可。希望这个总结对你理解 Babel 在 Webpack 中的核心使用有所帮助！
 */
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: false,
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "bundle.js",
    clean: true, // 清空上一次打包的内容
  },
  resolve: {
    extensions: [".js", ".json", ".jsx", ".ts", ".vue", ".wasm"],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/, // x?: 0或者1个x
        exclude: /node_modules/, // 排除node_modules
        use: {
          loader: "babel-loader",
          // options: {
          //   // plugins: [
          //   //   '@babel/plugin-transform-arrow-functions', // 将箭头函数转换为普通函数
          //   //   '@babel/plugin-transform-block-scoping' // 将块级作用域转换为函数作用域
          //   // ]
          //   presets: [
          //     [
          //       "@babel/preset-env",
          //       {
          //         // 在开发中针对babel的浏览器兼容查询使用browserslist工具, 而不是设置target
          //         // 因为browserslist工具, 可以在多个前端工具之间进行共享浏览器兼容性(postcss/babel)
          //         targets: ">5%", // 使用browserslist工具查询兼容性
          //       },
          //     ],
          //   ],
          // },
        },
      },
      {
        test: /\.ts$/,
        // use: 'ts-loader' // ts-loader: 将ts文件转换为js文件
        use: "babel-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
};
